<template>
	<view class="content">
		<cu-custom bgColor="bg-white" :isBack="true" textRight="true" type="">
			<block slot="backText" class="titilestyle">{{title}}</block>
			<block slot="right" class=""></block>
		</cu-custom>
		<scroll-view scroll-y="true" :style="{height: swiperHeight+'px'}">

			<view class="bannerBox itemBox " v-if="bannerNum>0">
				<swiper class="swiper " indicator-dots="true" :circular="true" :autoplay="autoplay" :interval="interval"
					:duration="duration" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#FFFFFF">
					<swiper-item v-for="(item,index) in banner" v-if="item.position_type==0 && bannerNum>1"
						@click="openUrl(item)">
						<view class="lunboBox ">
							<image class="lunboImg" :src="item.thumb"></image>

						</view>
					</swiper-item>

					<swiper-item v-for="(item,index) in banner" v-if="item.position_type==0 && bannerNum==1"
						@click="openUrl(item)" @touchmove.stop>
						<view class="lunboBox ">
							<image class="lunboImg" :src="item.thumb"></image>

						</view>
					</swiper-item>

				</swiper>

			</view>
			<view class="bannerBox itemBox pointer-evernt" v-if="bannerNum==0">
				<swiper class="swiper " :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="lunboBox">
							<image class="lunboImg" :src="resDomain+'/static/img/home.png'"></image>

						</view>
					</swiper-item>

				</swiper>

			</view>

			<view class="inro-card" @click="jumpToShop()">
				<view class="flex  s-item-head" v-if="shop">
					<view class="cu-avatar radius lg bg-gray border-radius-sm"
						:style="{backgroundImage:'url('+shop.logo+')'}">

					</view>
					<view class="item-bottom  flex flex-direction  justify-around">
						<view class="text-cut text-bold">{{shop.shop_name || ""}}</view>
						<view class="text-cut text-gray text-over"><text class="cuIcon-locationfill"></text>
							{{shop.distance || ""}}丨{{shop.address || ""}}
						</view>
					</view>
					<view class="middle">
						<text class="cuIcon-right text-gray"></text>
					</view>
				</view>

				<view class="flex justify-between text-black" v-else>
					<view class="basis-xl">
						<text class="cuIcon-favor text-grey"></text>
						<text class="padding-lr">请选择店铺</text>
					</view>
					<view class="basis-xs flex justify-end">
						<text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
			<picker @change="changeDevice" :value="deviceIndex" :range="device" v-if="device.length>0">

				<view class="inro-card margin-top flex justify-between  text-black">

					<view class="basis-xl ">
						<text class="cuIcon-favor text-grey"></text>
						<text class="padding-lr">{{deviceIndex>-1?device[deviceIndex]:"请选择打印设备"}}</text>
					</view>
					<view class="basis-xs flex justify-end ">
						<text class="cuIcon-right"></text>
					</view>
				</view>
			</picker>

			<view class="nav-list margin-top" v-if="elements.length>0">
				<view class="nav-li flex  text-white" v-for="(item,index) in elements" :key="index" @click="jump(index)"
					:style="[{background:colorArr[item.type-1].color}]">
					<view class="basis-sm  ">
						<text :class="'cuIcon-'+colorArr[item.type-1].icon " style="font-size: 70rpx;"></text>
					</view>
					<view class="basis-lg ">
						<view class="nav-title text-blod" style="font-weight: 700;">{{item.name}}</view>
						<view class="nav-name">￥{{item.price}}</view>
					</view>
				</view>
			</view>

			<view class="middle margin-top text-gray" v-else>
				暂无服务或请选择打印设备
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "CloudPrit",
		data() {
			return {
				title: "云打印",
				bannerNum: 0,
				resDomain: this.resDomain,
				autoplay: true,
				interval: 3000,
				duration: 500,
				StatusBar: this.Custom,
				swiperHeight: 0,
				shop: null, //店铺
				device: [], //设备列表
				dl: [],
				deviceIndex: -1, //选中的设备
				colorArr: [{
						color: "#DBDBDD",
						icon: 'text',
						path: "/app/CloudPrint/pages/index/print"
					},
					{
						color: "#DBDBDD",
						icon: 'copy',
						path: "/app/CloudPrint/pages/index/print"
					},
					{
						color: "#70BDEC",
						icon: 'text',
						path: "/app/CloudPrint/pages/index/print"
					},
					{
						color: "#70BDEC",
						icon: 'copy',
						path: "/app/CloudPrint/pages/index/print"
					},
					{
						color: "#DBDBDD",
						icon: 'camerafill',
						path: "/app/CloudPrint/pages/index/photoSlice",

					},
					{
						color: "#AD63C0",
						icon: 'camerafill',
						path: "/app/CloudPrint/pages/index/photoSlice"
					},

					{
						color: "#DBDBDD",
						icon: 'newsfill',
						path: "/app/CloudPrint/pages/index/photoSlice"
					},
					{
						color: "#70D256",
						icon: 'newsfill',
						path: "/app/CloudPrint/pages/index/photoSlice"
					},
					{
						color: "#FEAB6A",
						icon: 'picfill',
						path: "/app/CloudPrint/pages/index/print"
					}, {
						color: "#AA62BF",
						icon: 'vipcard',
						path: "/app/CloudPrint/pages/index/print"
					},



				],
				elements: [

				],




			}

		},
		onReady() {
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 60;
			})
		},

		mounted() {
			let shop = uni.getStorageSync("printDevice");
			if (typeof shop != "undefined") {
				this.shop = shop;
				this.getDevice();
			}
		},
		methods: {
		

			/**
			 * 获取商铺
			 */
			selectshop(res) {
				// uni.setStorageSync("printShop", res);
				this.shop = res;
				this.getDevice();
			},
			getDevice() {
				this.device = [];
				this.apiRequest('/buyer/getDevice', {
					shop_id: this.shop.shop_id,
				}, 0, "POST").then(res => {

					let deviceId = uni.getStorageSync("printDevice");
					let id = -1;
					if (typeof deviceId != "undefined") {
						id = deviceId.device_id;
					}

					if (res.code == 200) {
						this.dl = res.data;
						for (let i in res.data) {
							this.device.push(res.data[i].name);
							(res.data[i].id == id) ? (() => {
								this.deviceIndex = i;
								this.elements = this.dl[i].priceList;
								this.$forceUpdate();

							})() : "";
						}
					}
				}).catch(() => {

				})

			},


			changeDevice(e) {
				let device = {
					id: this.dl[e.detail.value].id
				}
				this.shop.device_id = device.id;
				uni.setStorageSync("printDevice", this.shop);
				this.deviceIndex = e.detail.value;

				this.elements = this.dl[e.detail.value].priceList;




			},

			jumpToShop() {
				uni.navigateTo({
					url: "/app/CloudPrint/pages/index/shopMap"
				})
			},

			jump(index) {
				if (!this.shop && this.shop.device_id == undefined) {
					uni.showToast({
						title: "请先选择打印的商铺或设备",
						icon: "none"
					})

					return false;
				}
				switch (this.elements[index].type) {
					case 5:
						uni.chooseImage({
							count: 1,
							sizeType: ['original', 'compressed'],
							sourceType: ['camera '],
							success: (res) => {
								this.src = res.tempFilePaths;
								uni.navigateTo({
									url: "/app/CloudPrint/pages/index/sliceImg?src=" + this.src +
										"&type=image" + "&data=" + JSON.stringify(this.elements[
										index]) + "&shop_id=" + this.shop.shop_id
								})
							}
						});
						break;
					case 6:
						uni.chooseImage({
							count: 1,
							sizeType: ['original', 'compressed'],
							sourceType: ['camera '],
							success: (res) => {
								this.src = res.tempFilePaths;
								uni.navigateTo({
									url: "/app/CloudPrint/pages/index/sliceImg?src=" + this.src +
										"&type=image" + "&data=" + JSON.stringify(this.elements[
										index]) + "&shop_id=" + this.shop.shop_id
								})
							}
						});
						break;
					default:

						uni.navigateTo({
							url: this.colorArr[this.elements[index].type - 1].path + "?data=" + JSON.stringify(this
								.elements[index]) + "&shop_id=" + this.shop.shop_id
						})

						break;
				}


			}

		}








	}
</script>

<style scoped>
	/**
	 * banner样式
	 */
	.bannerBox {
		width: 92%;
		margin: 30upx auto;
		height: 200upx;
	}

	.lunboBox {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.screen-swiper {
		width: 100%;
		height: 100%;
	}

	.lunboImg {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
		position: relative;
	}

	.inro-card {
		width: 92%;
		margin: 20upx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 30upx;
		position: relative;
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		width: 92%;
		margin: 40upx auto;
		justify-content: space-between;
	}

	.nav-li {
		padding: 30upx;
		border-radius: 12upx;
		width: 48%;
		margin: 0 0% 20upx;
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}



	.nav-name {
		font-size: 24upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}





	.nav-li text {
		position: relative;

		margin-top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}

	.text-light {
		font-weight: 300;
	}

	.border-radius-sm {
		border-radius: 15rpx;
	}
</style>
<style lang="scss">
	.item-bottom {
		margin-left: 20rpx;
		width: 750*0.92-60-96rpx;
	}
</style>
